import React,{useState} from 'react'
import "./index.less"
import {Button,Space,Upload,Popconfirm,Radio,Slider,} from 'antd'
import {UploadOutlined} from '@ant-design/icons'

export default class Space_demo extends React.Component{
    render(){
        return (
            <div className="Space_demo">
                <h1>间距</h1>
                <Space>
                    Space
                    <Button type="primary">按钮</Button>
                    <Upload>
                        <Button>
                            <UploadOutlined/>点击上传
                        </Button>
                    </Upload>
                    <Popconfirm title="确定要打开吗" okText="确定" cancelText="取消">
                        <Button>点击</Button>
                    </Popconfirm>
                </Space>
                <hr/>
                <SpaceSize1/>
                <SpaceSize2/>
                <SpaceSize3/>
            </div>
        )
    }
}

function SpaceSize1(){
    const [size,setSize]=useState('small')
    return (
        <div className="SpaceSize1">
            <h1>间距调整</h1>
            <Radio.Group value={size} onChange={e=>setSize(e.target.value)}>
                <Radio value="small">small</Radio>
                <Radio value="middle">middle</Radio>
                <Radio value="large">large</Radio>
            </Radio.Group>
            <br/><br/>
            <Space size={size}>
                <Button type="primary">按钮</Button>
                <Button>Default按钮</Button>
                <Button type="dashed">dashed按钮</Button>
                <Button type="link">link按钮</Button>
            </Space>
            <hr/>
        </div>
    )
}

function SpaceSize2(){
    const [size,setSize]=useState('small')
    return (
        <div className="SpaceSize2">
            <h1>对齐方式</h1>
            <div className="space-align-container">
                <div className="space-align-block">
                    <Space align="center">
                        center
                        <Button type="primary">按钮</Button>
                        <span className="mock-block">Block</span>
                    </Space>
                </div>
                <div className="space-align-block">
                    <Space align="start">
                        start
                        <Button type="primary">按钮</Button>
                        <span className="mock-block">Block</span>
                    </Space>
                </div>
                <div className="space-align-block">
                    <Space align="end">
                        end
                        <Button type="primary">按钮</Button>
                        <span className="mock-block">Block</span>
                    </Space>
                </div>
                <div className="space-align-block">
                    <Space align="baseline">
                        baseline
                        <Button type="primary">按钮</Button>
                        <span className="mock-block">Block</span>
                    </Space>
                </div>
            </div>
            <hr/>
        </div>
    )
}

function SpaceSize3(){
    const [size,setSize]=useState(8)
    return (
        <div className="SpaceSize3">
            <h1>自定义间距</h1>
            <Slider value={size} onChange={value=>setSize(value)}></Slider>
            <br/><br/>
            <Space size={size}>
                <Button type="primary">按钮</Button>
                <Button>Default</Button>
                <Button type="dashed">dashed</Button>
                <Button type="link">link</Button>
            </Space>
            <hr/>
        </div>
    )
}